<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-select.min.css">
    <link rel="stylesheet" href="../css/select2.min.css">
    <link rel="stylesheet" href="../css/select2-bootstrap4.min.css">

    <link rel="stylesheet" href="../css/style.css">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html,
        body {
            height: 100%;
        }

        body {
            padding-bottom: 40px;
            background-color: #fff;
        }

        .form-signin {
            width: 100%;
            max-width: 640px;
            margin: auto;
            padding: 15px;
        }

        .form-signin .checkbox {
            font-weight: 400;
        }

        .form-signin .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
        }


        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .sr-only2 {
            margin-top: 15px;
        }


        .logodiv img {
            width: 240px;
            margin: 0 auto;
            display: block;
        }

        .logodiv {
            text-align: center;
        }

        .logodiv h1 {
            font-size: 1.4rem;
            color: #03357a;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .logodiv h2 {
            font-size: 1.5rem;
            margin-bottom: 80px;
        }



        .fgtpaws {
            text-align: center;
            margin-top: 10px;
        }

        .btn {
            padding: 0.375rem 0.15rem
        }

        .btn-tiqu {
            width: 125px;
            margin: 0 auto;
            display: block;
        }

        .buytitle {
            font-size: 1.1rem;
            color: #03357a;
            margin-top: 20px;
        }

        .buytitle span {
            font-size: 1rem;
            color: #999;
        }

        .action-row button {
            margin-bottom: 15px;
        }

        .buysearch {
            font-size: smaller;
        }

        .formscreen .form-control-theme {
            font-size: smaller;
        }

        .action-row {
            position: fixed;
            width: 100%;
            bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
            background: #fff;
            left: 0;
        }

        .container2 {
            padding: 10px;
            display: block;
            overflow: hidden;
        }

        .bootstrap-select {
            width: calc(100% - 0px) !important;
        }

        .formscreen .filter-option-inner-inner {
            font-size: smaller;
        }

        .myselect {
            width: calc(100% - 0px);
        }

        .btn-action:disabled {
            background: #D9D9DA !important;
            color: #808081 !important;
        }

        .buysearch {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container2">
            <div class="tab-pane  show active" id="home">
                
                <div  class="row  align-items-center">
                    <div id="shouitem" class="col-12 col-sm-6 col-md-4">
                        <div class="d-flex bd-highlight align-items-start">

                            <div class="pt-2 flex-grow-1 bd-highlight">
                                <table class="table table-buy table-borderless table-sm">
                                    <tr>
                                        <td colspan="2" class="ttl">{{lan['Part']}}/{{lan['Desc']}}</td>
                                        <td class="ttl">{{lan['Tran_Qty']}}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">{{post.PartNum}}<br />{{post.PartDescription}}</td>
                                        <td>{{post.TranQty}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <table  class="table table-buy table-borderless table-sm">
                <tr>
                    <td width="50" class="ttl"></td>
                    <td class="ttl">
                        <div class="d-flex bd-highlight align-items-start">
                            <div class="pt-2 flex-grow-1 bd-highlight">
                                {{lan['Serial_No']}}
                            </div>  
                        </div>
                    </td>
                </tr>
                <tr style="vertical-align: middle;" v-for="(item,index) in post.SerialNum"
                    :key="'shou'+item.SerialNumber">
                    <td style="vertical-align: middle;text-align: center;">{{index+1}}</td>
                    <td>
                        <input type="text"
                        :disabled="post.snsCheck || post.Lot_btn"
                        @blur="validateSerialNumber(item,index)"
                        v-model.lazy="post.SerialNum[index].SerialNumber"
                        class="form-control form-control-num" value="">
                
                    </td>
                </tr>
            </table>


        </div>


        <div style="height:100px;"></div>
        <div class="action-row">
            <div class="container">
                <div class=" row justify-content-center">
                    <div class="col-4 col-md-4">
                        <button type="button" tapmode="" @click="comfirmClick"
                            class="btn btn-primary btn-action">{{lan['OK']}}</button>
                    </div>


                    <div class="col-4 col-md-4">
                        <button type="button" tapmode="" @click="close"
                            class="btn btn-primary btn-action">{{lan['Cancel']}}
                        </button>
                    </div>

                </div>

            </div>

        </div>
    </div>

</body>
<script type="text/javascript" src="../script/lang.js"></script>
<script type="text/javascript" src="../script/model.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../script/bootstrap-select.min.js"></script>
<script type="text/javascript" src="../script/select2/select2.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var postcount = 0;
    var tagspostcount = 0;
    var returncount = 0;
    var postlist = [];
    var tags = [];

    const app = new Vue({
        el: '#app',
        data: {
            list: [],
            post: {},
            listids: [],
            all1:1,
            screenwidth: document.body.clientWidth,
            vendors: [],
            searchdata: {},
            uinfo: {},
            lotinfo: {},
            max_selectd: 0,
            xz_index: 1,
            LabelNum: '',
            CartonNum: '',
            PalleLabel: '',
            //postlist: [],
            //postlistids: [],
            create_btn: false,
            receipt_btn: true,
            print_btn: true,
            print_num: '',
        },
        mounted() {
            const that = this

        },
        methods: {
            close(){
                let allSerialNumbersHaveValue = this.post.SerialNum.every(item => item.SerialNumber);
                console.log(allSerialNumbersHaveValue)
                if (allSerialNumbersHaveValue) {
                    // 所有SerialNumber都有值，触发直接关闭事件
                    api.closeWin({}); 
                } else {
                    this.$set(this.$data.post,"SerialNum",[])
                    api.sendEvent({
                        name: 'sn_inventory_transfer',
                        extra: this.post
                    });
                    api.closeWin({}); 
                }
                
            },
            comfirmClick() {
                if (this.post.snsCheck) {
                    api.closeWin({});
                    return;
                }
            
                let allValid = true; // 标记所有输入是否都通过校验
                app.post.oldQty = app.post.TranQty
                
                for (var i = 0; i < this.post.SerialNum.length; i++) {
                    if (this.post.SerialNum[i].SerialNumber === "") {
                        api.toast({
                            msg: this.post.PartNum + lan['Serialnum_Label_placeholder'],
                            location: 'middle'
                        });
                        return;
                    }
                    const isValid = validateSerialNumber(this.post.SerialNum[i], i);
                    if (!isValid) {
                        allValid = false; // 有一个校验不通过就将标记设为 false
                    }
                }

                if (allValid) {
                    closeSnWin();
                }
                
            },
        }
    });
    apiready = function () {
        api.parseTapmode();
        server = getapi();

        api.addEventListener({ name: 'navitembtn' }, function (ret, err) {
            if (ret.type == 'left') { app.close(); }
            if (ret.type == 'right') { scan(); }
        });
        api.addEventListener({
            name: 'keyback',
            extra: {
                slidBackIntercept: true    
            }
        }, function (ret, err) {
            app.close()

        });
        api.addEventListener({
            name: 'infrared_scanning'
        }, function (ret, err) {
            if (ret && ret.value && ret.value.str) {
                get_code_data(ret.value.str);
            }
        });
        app.max_selectd = api.pageParam.post.MaxQty;
        app.post = api.pageParam.post;
        app.searchdata = api.pageParam.searchdata;


    }
    function scan() {
        var FNScanner = api.require('FNScanner');
        FNScanner.open({
            autorotation: true
        }, function (ret, err) {
            console_debug(ret, err);
            if (ret) {
                if (ret.eventType == 'success') {
                    get_code_data(ret.content);
                }

            } else {

            }
        });
    }
    let scannedSerialNumber = [];
    function get_code_data(content) {
        // 获取扫描到的序列号值
        const scannedValue = content.trim();
        userinfo = get_user_info();
        var filter = "?CompID=" + userinfo.Company;
        filter += "&PartNum=" + app.post.PartNum
        filter += "&WarehouseCode=" + app.post.WarehouseCode;
        filter += "&BinNum=" + app.post.BinNum;
        if(app.post.LotNum){
            filter += "&LotNum=" + app.post.LotNum; 
        }

        filter += "&SerialNum=" + scannedValue
      
        console_debug(filter, '');

        api.ajax({
            url: server + 'BaqSvc/WMS_StockSN/' + filter,
            method: 'get',
            returnAll: false,
            headers: {
                'Authorization': userinfo.Token,
            },
            data: {}
        }, function (ret, err) {
            ajaxing = 0;
            //alert(1);
            console_debug(ret, "loadSerialNum");
            hideProgress();
            if (ret && ret.value.length > 0) {
                // 判断扫描到的序列号是否已经存在于已扫描序列号列表中
                if (scannedSerialNumber.includes(scannedValue)) {
                    api.toast({
                        msg: scannedValue + lan['SerialNum_Unique'],
                        location: 'middle'
                    })
                    return;
                }

                // 遍历 SelectedSerialNumbers 列表，查找第一个空的 SerialNumber
                let emptyIndex = -1;
                for (let i = 0; i < app.post.SerialNum.length; i++) {
                    if (app.post.SerialNum[i].SerialNumber === '') {
                        emptyIndex = i;
                        break;
                    }
                }

                // 如果找到了空的 SerialNumber，则赋值为扫描到的序列号
                if (emptyIndex >= 0) {
                    app.post.SerialNum[emptyIndex].SerialNumber = scannedValue;
                    scannedSerialNumber.push(scannedValue);
                } else {
                    // 如果没有找到空的 SerialNumber，则遍历除第一个对象之外的其他对象，判断是否存在相同的序列号
                    for (let i = 1; i < app.post.SerialNum.length; i++) {
                        if (app.post.SerialNum[i].SerialNumber === scannedValue) {
                            api.toast({
                                msg: scannedValue + lan['SerialNum_Unique'],
                                location: 'middle'
                            })
                            return;
                        }
                    }

                    // 如果没有相同的序列号，则将其赋值给第一个空的 SerialNumber
                    app.post.SerialNum[emptyIndex].SerialNumber = scannedValue;
                    scannedSerialNumber.push(scannedValue);
                }

            }else{
                 // 序列号无效，显示相应的提示  
                api.toast({  
                    msg: scannedValue + lan['serial_exist_placeholder'],  
                    location: 'middle'  
                });  
            }

        });
        
    }

    function loadSerialNum(value,index) {
        userinfo = get_user_info();
        var filter = "?CompID=" + userinfo.Company;
        filter += "&PartNum=" + app.post.PartNum
        filter += "&WarehouseCode=" + app.post.WarehouseCode;
        filter += "&BinNum=" + app.post.BinNum;
        if(app.post.LotNum){
            filter += "&LotNum=" + app.post.LotNum; 
        }

        filter += "&SerialNum="+value
      
        console_debug(filter, '');

        api.ajax({
            url: server + 'BaqSvc/WMS_StockSN/' + filter,
            method: 'get',
            returnAll: false,
            headers: {
                'Authorization': userinfo.Token,
            },
            data: {}
        }, function (ret, err) {
            ajaxing = 0;
            //alert(1);
            console_debug(ret, "loadSerialNum");
            hideProgress();
            if (ret && ret.value.length > 0) {
               

            }else{
                 // 序列号无效，显示相应的提示  
                api.toast({  
                    msg: value +  lan['serial_exist_placeholder'],  
                    location: 'middle'  
                });
                app.post.SerialNum[index].SerialNumber = '';    
            }

        });
    }
    function validateSerialNumber(item, index) {
        const input = event.target;
        const value = app.post['SerialNum'][index].SerialNumber;
        loadSerialNum(value,index)
        const isDuplicate = app.post.SerialNum.some((serialObj, i) => {
            return i !== index && serialObj.SerialNumber === value;
        });
        if (isDuplicate) {
            // app.$set(app.$data.list[app.list_index]['SelectedSerialNumbers'][index], "SerialNumber", "");
            api.toast({
                msg: value + lan['SerialNum_Unique'],
                location: 'middle'
            });
            return false;
        }

        return true
       
    }

    function closeSnWin() {
        api.sendEvent({
            name: 'sn_inventory_transfer',
            extra: app.post
        });
    }









</script>

</html>